<template>
	<view class="date_search">
		<view class="d_top" style="border-bottom: 1rpx solid #e6e6e6;">
			<view class="info" :class="current==1 ? 'active':''" @click="dateSet1(1)">昨日</view>
			<view class="info" :class="current==2 ? 'active':''" @click="dateSet1(2)">今日</view>
			<view class="info" :class="current==5 ? 'active':''" @click="dateSet1(5)">近7日</view>
			<view class="info" :class="current==3 ? 'active':''" @click="dateSet1(3)">本月</view>
		</view>
		<view class="d_top" :class="current==4 ? 'active':''">
			<view class="info">
				<picker mode="date" @change="dateSet2('start',$event)" class="h-100 d_picker" :value="startTime">
					<text v-if="startTime">{{startTime}}</text>
					<text v-else class="text-gray1">开始日期</text>
				</picker>
			</view>
			<view style="line-height: 80rpx;">~</view>
			<view class="info">
				<picker mode="date" @change="dateSet2('end',$event)" class="h-100 d_picker" :value="endTime">
					<text v-if="endTime">{{endTime}}</text>
					<text v-else class="text-gray1">结束日期</text>
				</picker>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require("utils/util.js");

	export default {
		name: 'date-search',
		data() {
			return {
				startTime: null,
				endTime: null,
				current: null
			}
		},
		created() {
			this.dateSet1()
		},
		methods: {
			dateSet1(flag) {
				this.current = flag				
				let today = new Date()
				if (flag == 1) {
					// 获取昨天的日期
					const yesterday = new Date(today);
					yesterday.setDate(today.getDate() - 1);
					this.startTime = util.getDay(yesterday)
					this.endTime = util.getDay(yesterday)
				} else if (flag == 2) {
					// 今天
					this.startTime = util.getDay(today)
					this.endTime = util.getDay(today)
				} else if (flag == 3) {
					// 本月
					const year = today.getFullYear();
					const month = today.getMonth() + 1; // 返回的月份从0开始，需要加1
					const firstDayOfMonth = year + "-" + month + "-01"
					this.startTime = util.getDay(firstDayOfMonth)
					this.endTime = util.getDay(today)
				} else if(flag == 5) {
					// 近7日
					this.startTime = util.getLSevenDay()
					this.endTime = util.getDay(today)
				}				
				this.setDate()
			},
			dateSet2(flag, e) {
				if (e && e.detail && e.detail.value) {
					let time = new Date(e.detail.value)
					if (flag == 'start') {
						if (this.endTime && (time > new Date(this.endTime))) {
							util.uShowModal('开始日期不能晚于结束日期')
							return
						}
						this.current = 4
						this.startTime = e.detail.value
						this.setDate()
					} else {
						if (this.startTime && (time < new Date(this.startTime))) {
							util.uShowModal('结束日期不能早于开始日期')
							return
						}
						this.current = 4
						this.endTime = e.detail.value
						this.setDate()
					}
				}
			},
			// 更换时间
			setDate(){
				this.$emit('getTime',{
					startTime: this.startTime ? (this.startTime + ' 00:00:00') : null,
					endTime: this.endTime ? (this.endTime  + ' 23:59:59') : null,
					current: this.current
				})
			}
		}
	}
</script>

<style scoped>
	.date_search {
		background-color: #fff;
		border-radius: 15rpx;
		overflow: hidden;
	}

	.date_search .d_top {
		display: flex;
		height: 80rpx;		
	}

	.date_search .d_top .info {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.date_search .d_top .info .d_picker {
		width: 100%;
		line-height: 80rpx;
		text-align: center;
	}
	
	.date_search .active {
		background-color: #FE7193;
		color: #fff;
	}
</style>